<template>
  <div class="pie" ref="pie_chart">
  </div>
</template>
<script lang='ts'>
import { reactive, ref, onMounted, onBeforeMount, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import * as echarts from 'echarts';
// import { EChartOption, EChartsResponsiveOption } from "echarts"

import { elmessage, data } from "@/hook/hook"
import { getUserAddress,getTenHotJob } from "@/api/adminApi"
export default {
  name: 'ChinaMap',
  setup() {
    const store = useStore()
    // @ts-ignore
    const { proxy } = getCurrentInstance() // 1.获取proxy实例

    const pie_chart = ref()


    // 从后台获取数据
    const getDatas = () => {
      getTenHotJob(data()).then((res: any) => {
        
        dataSet(res.data["datas"])

      })
    }
    const dataSet = (data: any) => {
      store.state.adminState.jobHotDatas = data
    }
    const dataGet = () => {
      return store.state.adminState.jobHotDatas
    }
    // 画图
    const init = () => {
      var myChart = echarts.init(pie_chart.value) //这里是为了获得容器所在位置   
      
      // 指定地图配置项和数据
      var option = {
        title: {
          text: '热门岗位',
          subtext: '注：仅统计前十',
          left: 'left',
          textStyle:{
            fontSize: 24
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // 垂直
          // orient: 'vertical',
          // 水平
          orient: 'horizontal',
          left: 'left',
          // top: "middle",
          top:"bottom",
        },
        series: [
          {
            // name: '岗位',
            type: 'pie',
            radius: '50%',
            data: dataGet(),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      myChart.setOption(option)
      // myChart.setOption(option as EChartOption | EChartsResponsiveOption)


    }

    onMounted(async () => {
      await getDatas()
      setTimeout(() => {
        init()
      }, 500);

    })
    

    return {
      pie_chart,
    }
  }
}
</script>
<style scoped>
.pie {
  /* display: flex; */
  width: 600px;
  height: 500px;
}
</style>